import React, { ReactNode } from 'react';

import cn from 'classnames';

import s from './FlexWrapper.module.scss';

type Props = {
  children: ReactNode;
  className?: string;
  isStart?: boolean;
  gap?: any;
  isCenter?: boolean;
  isModalWidth?: boolean;
};

export const FlexWrapper = ({ children, className, isStart, gap, isCenter, isModalWidth }: Props) => (
  <div
    className={cn(isStart ? s.flexColStart : s.flexColCentered, className)}
    style={{
      gap: gap && `${gap}px`,
      alignItems: isCenter ? 'center' : undefined,
      width: isModalWidth ? '100%' : undefined,
    }}
  >
    {children}
  </div>
);
